<template>
	<view class="coupon-list-page">
		<!-- 优惠券列表 -->
		<view class="coupon-list">
			<view class="coupon-item" v-for="(item, index) in couponList" :key="index">
				<!-- 左侧金额区域 -->
				<view class="coupon-left">
					<text class="amount">{{ item.FirstLevelTitle }}</text>
				</view>
				<!-- 右侧信息区域 -->
				<view class="coupon-right">
					<text class="title">{{ item.SecondLevelTitle }}</text>
					<text class="desc">{{ item.ActivityDescription }}</text>
					<!-- 按钮区域 -->
					<view class="btn-area">
						<view class="btn" :class="{
                'btn-get': !item.GetStatus && !item.GetStatus,
                'btn-used': item.GetStatus,
                'btn-consult': item.GetStatus && !item.GetStatus,
              }" @click="handleCouponAction(item)">
							<text :class="{
                  'btn-text-get': !item.GetStatus && !item.GetStatus,
                  'btn-text-used': item.GetStatus,
                  'btn-text-consult': item.GetStatus && !item.GetStatus,
                }">
								{{
                  item.GetStatus
                    ? "已领取"
                    : item.GetStatus
                    ? "咨询使用"
                    : "立即领取"
                }}
							</text>
							<text class="tag" v-if="item.GetStatus">已领取</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 底部菜单 -->
		<view class="bottom-nav">
			<view class="nav-item" @click="goHome">
				<i class="iconfont nav-icon" style="color: #01AEFD;">&#xe614;</i>
				<text>首页</text>
			</view>
			<view class="nav-item" @click="showShareModal = true">
				<i class="iconfont nav-icon" style="color: #02D768;">&#xe66c;</i>
				<text>分享</text>
			</view>
			<view class="nav-item" @click="goShare">
				<i class="iconfont nav-icon" style="color: #FD2624;">&#xe60e;</i>
				<text>抢优惠</text>
			</view>
			<view class="nav-item" @click="goMy">
				<i class="iconfont nav-icon" style="color: #000;">&#xe608;</i>
				<text>我的</text>
			</view>
		</view>
		<!-- 分享弹层 -->
		<view class="share-modal-mask" v-if="showShareModal" @click="showShareModal = false"></view>
		<view class="share-modal" :class="{ 'share-modal-show': showShareModal }">
			<view class="share-title">分享到</view>
			<view class="share-options">
				<!-- 分享给好友按钮 -->
				<button class="share-btn friend-btn" open-type="share" @click="setShareData('friend')">
					<i class="iconfont share-icon" style="color: #02D768;">&#xe609;</i><br />
					分享给好友
				</button>

				<!-- 分享到朋友圈按钮 -->
				<button class="share-btn timeline-btn" @click="shareToTimeline">
					<i class="iconfont share-icon" style="color: #02D768;">&#xe669;</i><br />
					分享到朋友圈
				</button>
			</view>
			<!-- <view class="share-cancel" @click="showShareModal = false">取消</view> -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				couponList: [],
				// 分享弹层显示状态
				showShareModal: false,
				shareType: 'friend', // 分享类型：friend/timeline
				shareData: {
					title: '唐云科技',
					path: '/pages/index/index', // 分享路径
					imageUrl: 'https://tangyun.tangyuntech.com/Images/UploadImages/915f98fd49a149238bac4595a4e87582.png' // 分享图片
				}
			};
		},
		mounted() {
			this.getList()
		},
		methods: {
			getList() {
				uni.request({
					url: 'https://tangyun.tangyuntech.com/ActivityItemManageApi/GetActivityItemList', // 后端接口地址，需替换为实际地址
					method: 'POST',
					data: {
						// openId: wx.getStorageSync('openid'),
						getStatus: -1,
						useStatus: -1,
						pageIndex: 1,
						pageSize: 10,
					},
					success: (res) => {
						if (res.statusCode === 200) {
							console.log('调用成功:', res);
							this.couponList = res.data.data.data
						} else {
							console.error('调用失败', res.data);
						}
					},
					fail: (err) => {
						console.error('请求后端接口失败', err);
					}
				});
			},
			// 处理优惠券操作（领取、咨询等）
			handleCouponAction(item) {
				if (item.UseStatus) {
					uni.showToast({
						title: "该优惠券已领取",
						icon: "none",
					});
				} else if (item.GetStatus) {
					uni.navigateTo({
						url: '/pages/home/hb'
					});
				} else {
					// 模拟领取优惠券
					item.GetStatus = true;
					uni.showToast({
						title: "领取成功",
						icon: "success",
					});
				}
			},
			// 跳转到首页
			goShare() {
				uni.reLaunch({
					url: '/pages/home/couponList'
				})
			},
			goHome() {
				uni.reLaunch({
					url: '/pages/index/index'
				})
			},
			goMy() {
				uni.reLaunch({
					url: '/pages/home/my'
				})
			},
			// 设置分享数据
			setShareData(type) {
				this.shareType = type;
				// 可以根据类型动态修改分享内容
				if (type === 'friend') {
					this.shareData.title = '快来看看这个内容！';
				} else {
					this.shareData.title = '推荐一个好东西给大家';
				}
			},

			// 触发朋友圈分享
			shareToTimeline() {
				// 先设置分享类型
				this.setShareData('timeline');

				// 检查是否支持朋友圈分享
				if (wx.canIUse('onShareTimeline')) {
					// 显示分享菜单，指定支持的分享类型
					wx.showShareMenu({
						withShareTicket: true,
						menus: ['shareTimeline'] // 只显示朋友圈分享
					});

					// 主动触发分享行为
					wx.updateShareMenu({
						showShareItems: ['shareTimeline'],
						success: () => {
							console.log('已准备好朋友圈分享');
						}
					});
				} else {
					uni.showToast({
						title: '当前微信版本不支持朋友圈分享',
						icon: 'none'
					});
				}
			}
		},
		// 分享给好友的生命周期函数
		onShareAppMessage() {
			// 根据shareType返回不同的分享内容
			return {
				title: this.shareType === 'friend' ? '唐云科技已帮上千家外贸公司、工厂升级转型' : this.shareData.title,
				path: this.shareData.path,
				imageUrl: this.shareData.imageUrl,
				success: () => {
					uni.showToast({
						title: '分享好友成功',
						icon: 'success'
					});
					this.showShareModal = false
				},
				fail: (err) => {
					console.error('分享好友失败', err);
				}
			};
		},

		// 分享到朋友圈的生命周期函数
		onShareTimeline() {
			return {
				title: this.shareType === 'timeline' ? '朋友圈专属分享标题' : this.shareData.title,
				path: this.shareData.path,
				imageUrl: this.shareData.imageUrl,
				success: () => {
					uni.showToast({
						title: '分享朋友圈成功',
						icon: 'success'
					});
				},
				fail: (err) => {
					console.error('分享朋友圈失败', err);
				}
			};
		},
	};
</script>

<style scoped>
	.coupon-list-page {
		background-color: #fff8dc;
		/* 整体背景色，类似浅黄 */
		min-height: calc(100vh - 12vh);
		padding-bottom: 100px;
		/* 给底部导航栏留空间 */
	}

	.coupon-list {
		padding: 15px;
	}

	.coupon-item {
		display: flex;
		background-color: #fff;
		border-radius: 10px;
		overflow: hidden;
		margin-bottom: 15px;
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
	}

	.coupon-left {
		width: 120px;
		background: linear-gradient(to bottom right, #ff6347, #ff4500);
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.amount {
		color: #fff;
		font-size: 32px;
		font-weight: bold;
	}

	.coupon-right {
		flex: 1;
		padding: 10px 15px;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.title {
		font-size: 18px;
		font-weight: bold;
		color: #333;
		margin-bottom: 5px;
	}

	.desc {
		font-size: 14px;
		color: #666;
	}

	.btn-area {
		display: flex;
		justify-content: flex-end;
		margin-top: 10px;
	}

	.btn {
		padding: 5px 15px;
		border-radius: 20px;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
	}

	.btn-get {
		background: linear-gradient(to right, #ff7f50, #ff6347);
	}

	.btn-consult {
		background-color: #ffa500;
	}

	.btn-used {
		background-color: #d3d3d3;
	}

	.btn-text-get {
		color: #fff;
	}

	.btn-text-consult {
		color: #fff;
	}

	.btn-text-used {
		color: #999;
	}

	.tag {
		position: absolute;
		top: -8px;
		right: -8px;
		background-color: #ff4500;
		color: #fff;
		font-size: 12px;
		padding: 2px 5px;
		border-radius: 8px;
		transform: rotate(15deg);
	}

	.tab-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 80px;
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: space-around;
		border-top: 1px solid #eee;
	}

	.tab-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.tab-icon {
		width: 28px;
		height: 28px;
	}

	.tab-text {
		font-size: 12px;
		color: #666;
		margin-top: 3px;
	}

	.bottom-nav {
		display: flex;
		justify-content: space-around;
		align-items: center;
		height: 50px;
		border-top: 1px solid #ccc;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		background-color: #fff;
	}

	.nav-item {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.nav-icon {
		width: 20px;
		height: 20px;
	}

	.trial-btn {
		background-color: #ff0000;
		color: #fff;
		padding: 10px 20px;
		border-radius: 5px;
	}

	/* 分享弹层样式 */
	.share-modal-mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 100;
	}

	.share-modal {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		height: 30vh;
		/* 高度为屏幕的30% */
		background-color: #fff;
		border-top-left-radius: 16px;
		border-top-right-radius: 16px;
		transform: translateY(100%);
		transition: transform 0.3s ease;
		z-index: 101;
	}

	.share-modal-show {
		transform: translateY(0);
	}

	.share-title {
		text-align: center;
		padding: 16px;
		font-size: 16px;
		color: #333;
		border-bottom: 1px solid #eee;
	}

	.share-options {
		display: flex;
		justify-content: center;
		align-items: center;
		height: calc(30vh - 90px);
		gap: 40px;
	}

	.share-option {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.share-icon {
		width: 60px;
		height: 60px;
		font-size: 60px;
		margin-bottom: 8px;
	}

	.share-text {
		font-size: 18px;
		color: #333;
	}

	.share-btn {
		border: none;
		/* 去除点击时的默认边框 */
		outline: none;
		/* 去除默认背景（可选，根据需求） */
		background-color: transparent;
	}

	.share-cancel {
		text-align: center;
	}
</style>